<!--
 * @Author: Xujianchen
 * @Date: 2024-11-28 15:32:00
 * @LastEditors: xujianchen
 * @LastEditTime: 2024-12-27 09:31:48
 * @Description: 颜色转换
-->
<template>
  <Wrapper>
    <el-space :size="10">
      <span>请选择颜色</span>
      <el-color-picker v-model="color" @change="handleColorChange" />
    </el-space>
    <el-row>
      <el-space :size="18">
        <div v-for="(item, index) in colorList" :key="index">
          <span>{{ item.label }}:</span>
          <div
            class="color-item"
            :style="{ 'background-color': item.value }"
          ></div>
        </div>
      </el-space>
    </el-row>
    <el-divider content-position="left"
      >高度自动过渡展示（grid布局）</el-divider
    >
    <div class="wrapper">
      <div class="btn">鼠标移过来看看啊</div>
      <div class="content">
        <span>我是内容1</span>
        <span>我是内容2</span>
        <span>我是内容3</span>
        <span>我是内容4</span>
        <span>我是内容5</span>
      </div>
    </div>

    <el-divider content-position="left">高度自动过渡展示（js实现）</el-divider>
    <el-button
      type="primary"
      class="button"
      @mouseenter="enter"
      @mouseleave="leave"
    >
      鼠标移入
    </el-button>
    <div ref="contentRef" class="detail">
      <span>我是内容1</span>
      <span>我是内容2</span>
      <span>我是内容3</span>
      <span>我是内容4</span>
      <span>我是内容5</span>
    </div>
  </Wrapper>
</template>

<script setup>
import tinycolor from 'tinycolor2'
import useConfigStore from '@/store/modules/config'

const configStore = useConfigStore()

const color = ref(configStore.globalConfig.primaryColor)
const colorList = ref([])
const contentRef = ref(null)

function handleColorChange(value) {
  const tColor = tinycolor(value)
  colorList.value = [
    { label: 'rgba', value: tColor.toRgbString() },
    { label: 'darken', value: tColor.darken().toString() },
    { label: 'lighten', value: tColor.lighten().toString() },
    { label: 'hex8', value: tColor.toHex8String().toString() },
  ]
}

function enter() {
  const el = contentRef.value
  el.style.height = 'auto'
  const { height } = el.getBoundingClientRect()
  el.style.height = 0
  el.style.transition = '0.5s'
  el.getBoundingClientRect()
  el.style.height = height + 'px'
}

function leave() {
  contentRef.value.style.height = 0
}
</script>

<style scoped lang="scss">
span {
  color: var(--el-text-color-regular);
  font-size: $font-size-medium;
}

.color-item {
  width: 120px;
  height: 120px;
  border-radius: 8rpx;
}

// 过渡
:deep(.el-divider__text) {
  background-color: $app-bg-color;
}

.wrapper {
  display: grid;
  grid-template-rows: $space-large 0fr;
  border-radius: 8px;
  transition: 0.3s;
  padding: $space-small-s;
  line-height: $space-large;
  margin-bottom: $space-medium-s;

  &:hover {
    grid-template-rows: $space-large 1fr;
    transition: 0.3s;
  }
}

.btn {
  margin-bottom: $space-medium-s;
  cursor: pointer;
}

.content {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--el-color-primary);

  span {
    color: var(--el-color-white);
  }
}

.detail {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 0;
  transition: 0.5s;
  border-radius: 4px;
  margin-top: $space-medium-s;
  background-color: var(--el-color-primary);

  span {
    color: var(--el-color-white);
    margin-bottom: $space-small-s;
  }
}
</style>
